<template>
  <div>
    <h1>侦听器,侦听数据的变化</h1>
    <input type="text" v-model="uname" />
  </div>
</template>

<script>
export default {
  data() {
    // data放数据  mathod放方法  cpmputed放计算属性  watch放侦听器
    return {
      uname: "任忆莲",
    };
  }, //侦听器 和data平级 //侦听器两种写法:
  watch: {
    //1.-------------------函数写法--------------------------
    // 数据项uname(新值,原值){}
    // uname(newval,oldval){
    //  console.log(newval,oldval);
    // }

    //2.-------------------对象写法--------------------------------
    // 数据项:{
    //  handler(新值,原值){},//相当于函数写法  固定的写法
    //  immediate:true,//可选
    //  deep:true//可选
    // }

    uname: {
      handler(newval, oldval) {
        console.log(newval, oldval);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>